//общие стили сюда

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

// Против скролла при открытии модалок
// html, body {
//     // Чтобы при скрытии прокрутки через overflow: hidden
//     // у нас появился отступ вместо скроллбара 
//     // и контент остался на месте
//     scrollbar-gutter: stable;
// }
// // Этот класс добавляется к body при открытии модального окна
// .scroll-lock {
//     // Убирает прокрутку
//     overflow: hidden;
// }

$mobile: "screen and (max-width: 599px)";
$tablet: "screen and (min-width: 600px) and (max-width: 1023px)";
$desktop: "screen and (min-width: 1024px)";

//переменные
// фон  блоков
$background-color: #990094;
$backgroundLine: #330031;
$inputcolor:#D9D9D9;
// тексты, в т.ч. и на кнопках
$color: #ffccfd;

// цвет кнопки
$btnBackGround: black;
$btnBackGroundHover: rgb(85, 14, 73);

// цвет заголовков по страницам
$headers: #ffffff;
$main-header: #5E0E5A; // заголовок для главной страницы
// переменные для шрифтов
$font-texts: "Noto Sans";
$font-titles: "Rubik";
$font-btns: "Fira Sans Condensed";


html {
    font-family: $font-texts, sans-serif;
}

h1, h2, h3, h4, h5, h6 {

    font-family: $font-titles, sans-serif;

}
// переменные для размера экрана

$mobile: "screen and (max-width: 599px)";
$tablet: "screen and (min-width: 600px) and (max-width: 1023px)";
$desktop: "screen and (min-width: 1024px)";

// переменные для размера шрифтов
/* $font-size-mobile: 15px;
$font-size-tablet: 18px;
$font-size-desktop: 22px; */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

//расположение текста и инпута
%display-block {
    display: flex;
    flex-direction: column;
}


//большие блоки в форме входа
%display-maxblock {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


//заголовок полей ввода
%text-block {
    font-size: 20px;
    font-family: $font-texts;
    color: $color;
    padding: 1%;

    @media #{$tablet}{
        font-size: 18px;
    }

    @media #{$mobile} {
        font-size: 16px;
    }
}

//для инпутов форма ввода, регистрации + кнопки
%square{
    background-color: $inputcolor;
    border: none;
    border-radius: 20px;

    @media #{$tablet}{
        font-size: 11px;
    }

    @media #{$mobile} {
        font-size: 9px;
    }
}


//поле ошибки
%error-text {
    margin-top: 1%;
    color: rgb(179, 116, 116);
}


.btn {
    //общий класс для кнопок
    background-color: $btnBackGround;
    font-family: $font-btns;
    border-radius: 4vh;
    border: solid black 1px;
    color: $color;
    width: 15vw;
    height: 7vh; 
    cursor: pointer;
    font-size: 1vw;
    padding: 0.5vw;

}

    @media #{$tablet} {
        .btn {
        font-size: 2vw;
        width: 23vw;
      }
    }
    @media #{$mobile} {
        .btn {
        font-size: 2.5vw;
        width: 30vw;
             }
    }
   
.btn:hover {
    background-color: $btnBackGroundHover;
    box-shadow: 5px 5px 5px $color;
}
// общий контейнер для страниц
.container {
    display: flex;
    flex-direction: column;
    padding-left: 3vw;
    padding-top: 4vh;
    margin: 0 3vw 3vh 3vw; //Убралпа правый бок
    background-color: $background-color;
    min-height: 90vh; 
    height: 100%;//чтобы контейнер растягивался на ширину контента
    color: $color;
    border-radius: 4vh 4vh 40vh 4vh;
}
@media #{$mobile} {
    .container{
        border-radius: 4vh 4vh 20vh 4vh;
  }
}
@media #{$tablet} {
    .container{
        border-radius: 4vh 4vh 30vh 4vh;
  }
}

